<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
.test-box { width: 600px; margin: 16px auto; line-height: 1.5; font-size: 14px; }
.float-left { float: left; margin-right:20px; }

.goto_top_diaocha, .goto_top_app, .goto_top_feed { display: block; width: 48px; height: 48px; margin-top: 10px; 
        background: url(http://img.mukewang.com/5453076e0001869c01920098.png) no-repeat; }
.goto_top_diaocha { background-position: -48px 0; }
.goto_top_diaocha:hover { background-position: -48px -50px; }
.goto_top_app { background-position: -96px 0; }
.goto_top_app:hover { background-position: -96px -50px; }
.goto_top_feed { background-position: -144px 0; }
.goto_top_feed:hover { background-position: -144px -50px; }

/*多背景应用*/
.wrapper {
            width: 640px;
            height: 1000px;
            margin: auto;
            background: url(./images/head.jpg) center top no-repeat, url(./images/foot.jpg) center bottom no-repeat;
            background-color: #4A00AB;
        }
</style>
</head>

<body>
        <input type="number" id="mibInput" step="100" class="mib_input" value="600">

<h2>float</h2>


<h3>float本质 文字环绕图片</h3>
<div class="test-box">
    <img src="images/111.jpg" class = "float-left" />
    <p>一直有这么一个美丽的误会，说我是张含韵的忠实粉丝，因为左边这种张含韵萝莉时候的照片频繁出现在我的文章中。</p>
    <p>实际上，当年，我还在念大学那会儿，我就把我收藏的一些美女照片调成成固定的几个比例，专门用来做演示使用。</p>
    <p>分别是128像素，256像素，512像素和原图。然后，非常巧合的是，这些示例图片中序号为1的妹子，就是张含韵。因此，只要有图片演示，无论是使用了1张还是10张，张含韵小妹妹自然都会出现。久而久之，大家都认为我是张含韵的忠实粉丝。</p>
    <p>然而，事实是什么呢？</p>
    <p>事实是，尼玛我以前还真的是张含韵的忠实粉丝，上大学那会儿，唯一关注的新浪名博就是张含韵的博客。不过现在嘛，普通粉丝，普通粉丝。</p>
</div>

<h3>流体布局  浮动与两侧皆自适应的流体布局</h3>
<div style="width: 600px; overflow: auto; resize: both; margin-bottom: 10px; background-color: #f5f5f5;" >
    <div class="mib_list">
        <a href="http://t.sina.com.cn/xuruoxuan" style="float: left; margin-right: 20px;">
            <img id="mibHeadImg" title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
        </a>
        <div style="display: table-cell; *display: inline-block; width: 2000px; *width: auto;">
            <p> /* 上面样式是固定布局写法 */</p>
            <p class="mib_sms">徐若瑄VIVIAN：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
        </div>    
    </div>
</div>


<h3>流体布局  浮动与单侧尺寸固定的流体布局</h3>
<div style="width: 600px; overflow: auto; resize: both;margin-bottom: 10px; background-color: #f5f5f5;" >
    <div style="padding: 20px; overflow: hidden; _zoom: 1; " >
        <a href="http://t.sina.com.cn/xuruoxuan" style=" width: 56px; float: left; ">
            <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
        </a>
        <!-- /* 下面这个是流体布局写法 */ -->
        <!--  这个是固定布局写法: { width: 484px; float: right; } -->
        <div style="margin-left: 76px;">
            <p class="mib_sms">徐若瑄VIVIAN：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
            <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
        </div>	
    </div>
</div>


    

<h3>流体布局  浮动与右侧尺寸固定的流体布局</h3>
<h4>浮动与右侧尺寸固定的流体布局 改变DOM位置</h4>
<div style="width: 600px; overflow: auto; resize: both;margin-bottom: 10px; background-color: #f5f5f5;" >
    <div style="padding: 20px; overflow: hidden; _zoom: 1; " >
        <!--  改变DOM位置的流体布局写法: -->
        <a href="http://t.sina.com.cn/xuruoxuan" style=" width: 56px; float: right; ">
            <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
        </a>
        <!--  改变DOM位置的流体布局写法 -->
        <div style="margin-right: 76px;">
            <p class="mib_sms">徐若瑄VIVIAN：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
            <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
        </div>	
    </div>
</div>


<h4>浮动与右侧尺寸固定的流体布局 不改变DOM位置</h4>
<div style="width: 600px; overflow: auto; resize: both;margin-bottom: 10px; background-color: #f5f5f5;" >
    <div style="padding: 20px; overflow: hidden; _zoom: 1; " >
        <div style="width: 100%; float: left;">
            <div style="margin-right: 76px;">
                <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
                <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
            </div>
        </div>
        <!-- /* 下面这个是左浮动，不改变DOM位置的流体布局写法 */ -->
        <a href="http://t.sina.com.cn/xuruoxuan" style="width: 56px; float: left; margin-left: -56px;">
            <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
        </a>	
    </div>
</div>

<hr>
<div style="float:right;">
    1.clear:both会清除父级内部指定了float的元素float
    <h2>clear与margin重叠</h2>
    1.用clear清除浮动(在浮动元素的底加入div且设置clear:both;)，会发生margin重叠显现<br>
    2.用BFC清除浮动(在浮动元素的父元素上加入overflow: hidden;)，则会把整个元素包起来，从而不会发生margin重叠现象
    <div style="background-color: #f5f5f5;overflow: hidden;">
        <img src="images/111.jpg" style="float:left;margin-bottom: 100px;">
        <div style="clear:both; margin-bottom:100px;background-color: #881692;">clear:both;</div>
    </div>
    <div style="margin-top: 100px;">本文字离图片的距离是？</div>
    <br><br><br><br>
    2.
    <div style="background-color: #f5f5f5; overflow: hidden;">
        <img src="images/111.jpg" style="float:left; margin-bottom: 100px;">
    </div>
    <div style="margin-top: 100px;">本文字离图片的距离是？</div>

    <hr />

    <div style="background-color: #10ee2a;">
            <div style="display:inline-block ;margin-bottom:100px;background-color: #881692;">clear:both;</div>
    </div>
</div>

<div style="clear:both;"></div>


<div>
    <h2>absolute</h2>
    <p>absolute与float是兄弟关系</p>
    <p>absolute的破坏性 会导致父容器塌陷</p>
    <p>去掉image的position:absolute;就正常了</p>


    <div style=" width: 600px; padding: 10px;background-color: #f0f0f0;">
        <img id="image" style="position:absolute;" src="http://img.mukewang.com/54447b06000171a002560191.jpg" width="256" height="191">
    </div>
</div>


<div style="margin-top:200px;">
    <h3>absolute可以不受overflow的限制</h3>
    <h3>overflow:hidden; 不隐藏 </h3>
    <div style="margin-top:50px;width: 380px;height: 100px; padding: 10px;background-color: #f0f0f0;overflow: hidden;">
        <div style="margin-top:-50px; position: absolute;width: 200px; height: 100px; background-color: #4b7fb1;">
        </div>
    </div>
    <h3>overflow:auto;scroll 固定 不受滚动影响 </h3>
    <div style="width: 380px;height: 100px; margin-top:10px;padding: 10px;background-color: #f0f0f0;overflow: auto;">
            <a href="#"  title="关闭"
                style="position: absolute;width: 34px; height: 34px;margin-left:320px; background: url(images/close.jpg) no-repeat;">
            </a>
            <div style="width: 200px;height: 280px; background-color: #4b7fb1;">
            </div>

    </div>

    
</div>




<div>
    <h3>absolute去float（和float可等效，不能和float同时存在,absolute会覆盖float属性,使float不起作用）</h3>
    <h4>可以去掉中间那个图片的position属性 看下变化</h4>
    <img src="images/111.jpg">
    <img style="position:absolute;float:left;" src="images/222.jpg">
    <img src="images/333.jpg">
</div>

<hr style="margin-top:100px;" >

<div style="margin-top:200px; float: right;"> 
    <h3>位置跟随（之前什么位置还是什么位置），会保持原有的display属性   ie7 absolute后会改变display为inline-block 可用div包裹解决</h3>
    <h4>可以改变中间那个图片的display属性为block 看下变化</h4>
    <img style="display:inline-block;" src="images/111.jpg">
    <img style="position:absolute; display:inline-block;" src="images/222.jpg">
    <img style="display:inline-block;" src="images/333.jpg">
</div>



<div style="margin-top:200px;float:left; "> 
    <h3>absolute脱离文档流,但选中的时候还是按dom顺序来的</h3>
    <h5 style="display:inline-block;">aaaaaaaa</h5>
    <h5 style="position:absolute; display:block;">bbbb</h5>
    <h5 style="display:inline-block;">cccc</h5>
</div>

<hr style="clear:both; margin-top:600px;" >

<h2 style="margin-top:100px;">无依赖的绝对定位</h2>


<div>
    <h3>用absolute来实现相对hot图标定位</h3>
    <h3>h3 margin: 0;去掉默认的值       margin: auto;  可以拉伸大小，使其居中显示</h3>
    <div style="width: 300px;background-color: #2A2C2E;">
        <div style="width: 300px;">
            <div style="height: 60px; ">
                <h3 style="margin: 0;float: left; font-size: 14px; font-weight: 400;">
                    <a href="http://www.imooc.com/seek/index" style="display: inline-block; line-height: 20px; padding: 20px 35px; color: rgb(233, 236, 15); text-decoration: none;">
                        求课<i style="position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(images/hot.gif);"></i>
                    </a>
                </h3>
            </div>
        </div>
    </div>
</div>



<div style="margin-top:100px;">
    <h4>1. 左上角推荐 使用绝对定位 浮起来在上层，不占位置 后面image直接在起始位置显示 </h4>
    <h4>2. 右上角vip图标 使用绝对定位 浮起来在上层，不占位置 因为位置跟随 所在还在右边 再让其向左偏移其宽度就可以了 
        因父级宽度为280px  image宽度也是280px 如果后面跟个空格，宽度就超了，就会换行显示后面的元素，所以前面加了注释 </h4>
    <h4>3. h5默认有margin值，会影响布局，margin: 0;去掉默认的值</h4>
    <div style="width: 300px; background-color: rgb(141, 10, 82);">
        <a href="http://www.imooc.com/view/121" style="float: left; width: 280px; height: 240px; margin: 5px 10px 15px; 
            border-radius: 0 0 1px 1px; background-color: #F7FAF9; 
            background-color: rgba(255,255,255,1); 
            box-shadow: 0 1px 2px #c5c5c5; 
            text-decoration: none;">
            <div style="background-color: #6396F1;">
                <span style="position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px;">推荐</span>
                <img width="280px" height="160px" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!-- &nbsp;  
                 --><i style="position: absolute; width: 36px; height: 36px; margin-left: -36px; 
                    background: url(images/vip.jpg); text-indent: -9em; overflow: hidden;">VIP</i>
            </div>
            <h5 style="margin: 0;line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; ">分享：CSS深入理解之float浮动</h5>
            <div style="margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden;">
                <span style="float:left;">已完结</span>
                <span style="float:right;">3514人学习</span>
            </div>
        </a>
    </div>
</div>

<div style="clear:both;"></div>
<hr>


<div style="margin-top:100px;">
    <h4>下拉框定位 使ul absolute 然后向下margin 39px   到输入框的下面   </h4>
    <h4>搜索   background-position: 0 -38px;   </h4>
    
    <div style="width: 262px;">
        <div style="margin-top: 20px; overflow: hidden;">
            <ul id="result" style="display: block; position: absolute; width: 260px; margin: 39px 0 0 -1px; 
                padding-left: 0; list-style-type: none; border: 1px solid #e6e8e9; 
                background-color: #fff; box-shadow: 0px 1px 2px #d5d7d8; font-size: 12px;">
                <li><a href="http://www.imooc.com/view/121">分享：CSS深入理解之float浮动</a></li>
                <li><a href="http://www.imooc.com/view/118">案例：CSS圆角进化论</a></li>
                <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧图应用</a></li>
                <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li>
                <li><a href="http://www.imooc.com/view/57">案例：如何用CSS进行网页布局</a></li>
            </ul>
            <input placeholder="课程搜索" style="width: 200px; line-height: 18px; padding: 10px; margin: 0; border: 0 none; font-size: 12px; font-family: inherit; float: left; ">
            <a href="javascript:" style="width: 38px; height: 38px; float: right; background: url(images/search.png); background-position: 0 -38px; text-indent: -9em; overflow: hidden;">搜索</a>
        </div>
    </div>
   
</div>





<div style="margin-top:200px;">
    <h4>使用absolute的跟随性，跟随在text-align:center;后  实现居中显示</h4>
    <div class="course-content">
        <div style="height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden;">
            &nbsp;<img src="http://img.mukewang.com/5453077400015bba00010001.gif" style="position: absolute; margin-left: -26px;" alt="加载中...">
        </div>
    </div>
</div>

<div style="margin-top:100px;">
    <h4>使用absolute(fixed)的跟随性，跟随在text-align:right;后  实现居右显示</h4>
    <div style=" width: 1200px; min-height: 600px; background: rgb(248, 250, 165);">
        <div style="height: 0; text-align: right; overflow: hidden;">
            &nbsp;<div style="display: inline; position: fixed; margin-left: 20px; bottom: 100px;">
                <a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
                <a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a>
                <a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
            </div>
        </div>
    </div>
</div>




<div style=" width: 1200px; margin-left: auto; margin-right: auto;">
        <h4>使用absolute(fixed)的跟随性，浮起不占地方 可使图文星号对齐，文字不溢出  </h4>
    <div style="min-height: 400px; padding: 100px 0; background-color: #fff;">
        <div style="width: 600px; margin-left: auto; margin-right: auto;">
            <div class="regist-group" style="margin-top: 20px; overflow: hidden;">
                <label style="width: 70px; padding-top: 10px; float: left;">
                    <span style="position: absolute; margin-left: -1em; font-family: simsun; color: #f30;">*</span>
                    登录邮箱
                </label>
                <div class="regist-cell" style="display: table-cell; *display: inline-block; ">
                    <input type="email" class="regist-input" style="height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; ">
                    <span class="regist-remark regist-warn" style="position: absolute; line-height: 21px; padding-left: 20px; padding-top: 9px; color: #be3948; ">
                        <i class="icon-warn" style="position: absolute; margin-left:-20px;display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center;"></i>
                        邮箱格式不准确（演示）
                    </span>
                </div>
            </div>
            <div class="regist-group" style="margin-top: 20px; overflow: hidden;">
                <label style="width: 70px; padding-top: 10px; float: left;">
                    <span style="position: absolute; margin-left: -1em; font-family: simsun; color: #f30;">*</span>
                    登录密码
                </label>
                <div class="regist-cell" style="display: table-cell; *display: inline-block; ">
                    <input type="password" class="regist-input" style="height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; ">
                    <span class="regist-remark" style="position: absolute; line-height: 21px; padding-top: 9px; color: #666;">
                        请输入6-16位密码，区分大小写，不能使用空格，不能使用空格
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>


<div style="margin-top:100px;  position:absolute;">

    <div style="margin-top:200px;margin-left: 500px;">
        <h4>absolute 大天使  不折翼的天使，可实现瞬间移动到非同类postion属性的地方   </h4>
        <h4>大天使  不折翼的天使，可实现瞬间移动到非同类postion属性的地方   </h4>
        <h4>position: absolute; left: 0; 移动到最左边   </h4>
        <h4>position: absolute; top: 0; 移动到最上边   </h4>
        <div style="position: absolute; top: 0; width: 200px; min-height: 200px; background: rgb(248, 250, 165);">
            
        </div>

        
    </div>
</div>


<div style="margin-top:500px;">
    <h4>absolute 拉伸（ie7+） 容器无需固定的width、height值，auto也支持拉伸 left vs right    top vs bottom </h4>
    <h4>absolute left:0;top:0;width:100%;height:100%; 与 absolute left:0;top:0;right:0;bottom:0; 等效  </h4>
    <h4>absolute left:0;top:0;width:30%; 与 absolute left:0;top:0;right:70%;bottom:0; 等效 </h4>
    <h4>absolute left:0;right:200px;   距离右侧200px </h4>
    <div style="position: absolute; left:0; right:70%; height: 200px; background: rgb(165, 233, 250);">
    </div>
    <div style="position: absolute; left:0; right:200px; height: 200px; background: rgb(248, 250, 165);margin-top: 200px;">
    </div>
</div>


<div style="margin-top:500px;">
        
    <h4>width、height值要优先于 left  right   top  bottom </h4>
    <h4>margin:auto;  会让   width、height与left、right、top、bottom两者进行相互合作（ie8+） </h4>
    <div style="position:relative;height: 200px;">
        <div style="position: absolute; top:0;left:0;bottom:0;right:0;width:50%;background: rgb(99, 199, 152);">
            
        </div>
    </div>
    <div style="position:relative;height: 200px;">
        <div style="position: absolute; top:0;left:0;bottom:0;right:0;width:50%;margin:auto;background: rgb(248, 250, 165);">
            
        </div>
    </div>
    <div>
        <span style="display: inline-block;position: relative;">
            <i style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;
                background-color: #fff;opacity: .5; filter: alpha(opacity=50);"></i>
            <img src="http://img.mukewang.com/547c34c9000171a002560191.jpg" width="256" height="191">
        </span>
        <img src="http://img.mukewang.com/547c34c9000171a002560191.jpg" width="256" height="191">
    </div>
</div>
 

<div style="position: relative;height: 600px; resize:vertical;">
    <div style="position: absolute;left: 0; top: 0; right: 0; bottom: 0;">
        <div style="float: left;height: 33.3%; width: 33.3%;position: relative;background: rgb(99, 199, 152);" data-index="1">1</div>
        <div style="float: left;height: 33.3%; width: 33.3%;position: relative;background: rgb(158, 236, 55);" data-index="2">2</div>
        <div style="float: left;height: 33.3%; width: 33.3%;position: relative;background: rgb(199, 99, 141);" data-index="3">3</div>
        <div style="float: left;height: 33.3%; width: 33.3%;position: relative;background: rgb(83, 18, 233);" data-index="4">4</div>
        <div style="float: left;height: 33.3%; width: 33.3%;position: relative;background: rgb(25, 109, 177);" data-index="5">5</div>
        <div style="float: left;height: 33.3%; width: 33.3%;position: relative;background: rgb(161, 14, 14);" data-index="6">6</div>
        <div style="float: left;height: 33.3%; width: 33.3%;position: relative;background: rgb(99, 199, 152);" data-index="7">7</div>
        <div style="float: left;height: 33.3%; width: 33.3%;position: relative;background: rgb(158, 236, 55);" data-index="8">8</div>
        <div style="float: left;height: 33.3%; width: 33.3%;position: relative;background: rgb(199, 99, 141);" data-index="9">9</div>
    </div>
</div>




<div>
    <h2>relative</h2>
    <p>relative  限制 absolute  的 <br>
       1. top bottom right left定位 <br>
       2. 限制z-index(不以absolute为准，而以父级的relative的z-index)<br>
       3. 限制overflow的作用<br>
     </p>
     <p>relative  只能限制 fixed 的 <br>
        1. 限制z-index(不以absolute为准，而已父级的relative的z-index)
      </p>
   
    <h3>relative 直接截掉了absolute露出的部分</h3>
    <div style="display:inline-block; margin-top:50px;width: 380px;height: 100px; padding: 10px;background-color: #f0f0f0;overflow: hidden;">
        <div style="margin-top:-50px; position: absolute;width: 200px; height: 100px; background-color: #4b7fb1;">
        </div>
    </div>
    <div style="display:inline-block;margin-top:50px;width: 380px;height: 100px; padding: 10px;background-color: #f0f0f0;overflow: hidden;position: relative;">
        <div style="margin-top:-50px; position: absolute;width: 200px; height: 100px; background-color: #4b7fb1;">
        </div>
    </div>
</div>



<div>
        <p>相对自身 top 10px; left 10px; 定位</p>
        <p>不影响其它元素的位置</p>
        <p>top vs bottom top 起作用</p>
        <p>left vs right left 起作用</p>


        <h3 >position: relative; top: -50px;  与 margin-top: -50px;  不会影响其它元素或布局 保留原始占据的位置</h3>
        <h4 >div display:inline-block; 位置会变化 </h4>
        <div style="float:left; width: 380px;height: 700px;background-color: #4fd862;">
            <img style="display:inline-block;" src="images/111.jpg">
            <img style="display:inline-block; position: relative; top: -50px;left: 10px;" src="images/222.jpg">
            <img style="display:inline-block;" src="images/333.jpg">
        </div>
        <div style="margin-left:10px;float:left; width: 380px;height: 700px;background-color: #4fd862;">
            <img style="display:inline;" src="images/111.jpg">
            <img style="display:inline-block; margin-top: -50px;" src="images/222.jpg">
            <img style="display:inline;" src="images/333.jpg">
        </div>
        <div style="clear:both;"></div>


        <h3>提高层级 一般后面的会在前面的上面，如果用relative可以改变</h3>
        <h3>在relative 的z-index:auto;时 不会限制absolute的层级 </h3>
        <div style="display: inline;">
            <img style="display:inline;position: relative;" src="images/111.jpg">
            <img style="display:inline-block; margin-left: -100px;" src="images/222.jpg">
        </div>
        <div style="display: inline;">
            <img style="display:inline;" src="images/111.jpg">
            <img style="display:inline-block; margin-left: -100px;" src="images/222.jpg">
        </div>
    </div>


    
<div>
    <h3>relative最小化原则</h3>
    <p>position:relative;不占高度位置</p>
    
    <div style="position:relative;">
        <img style="position:absolute;top:0;right:0;" src="images/111.jpg">
    </div>
    <div><span>afsdfsdfsd</span></div>
    <div><img style="display:inline;" src="images/333.jpg"></div>
</div>
    

</body>
</html>